<template>
  <div class="works">
    <h2>学员作品</h2>
    <carousel-3d>
      <slide :index="0"> <img :src="images0"> </slide>
      <slide :index="1"> <img :src="images1"> </slide>
      <slide :index="2"> <img :src="images2"> </slide>
      <slide :index="3"> <img :src="images3"> </slide>
      <slide :index="4"> <img :src="images4"> </slide>
     </carousel-3d>
  </div>
</template>

<script>
import i0 from '../assets/admin.png'
import i1 from '../assets/music.png'
import i2 from '../assets/sport.png'
import i3 from '../assets/xiangle.png'
import i4 from '../assets/img.png'
export default {
  data () {
    return {
      images0: i0,
      images1: i1,
      images2: i2,
      images3: i3,
      images4: i4
    }
  }
}
</script>

<style scoped>
  h2 {
    position: relative;
    top: 5%;
    text-align: center;
    font-size: 35px;
  }
  .works {
    width: 100%;
    height: 100%;
  }
  .carousel-3d-container {
    top: 30%;
  }
</style>
